<template>
  <header id="head">
    <ul class="head-up">
      <li>
      </li>
      <li>
        <span>|</span>
      </li>
      <li>
        <span>送至：天津市怪兽充电桩 <i class="iconfont icon-arrow-down"></i></span>
      </li>
      <li @click="toCart">
        <i class="iconfont icon-cart"></i>
      </li>
      <li>
        <i class="iconfont icon-qita more"></i>
        <span>|</span>
        <i class="iconfont icon-radio-off-full dot"></i>
      </li>
    </ul>
    <div class="head-down">
      <input v-model="keyWords" type="text" placeholder="请输入搜索关键字">
      <span @click="toSearch">搜索</span>
    </div>
  </header>
</template>
<script>
export default {
  name: 'SamHeader',
  data() {
    return {
      keyWords:''
    }
  } ,
  methods:{
    toCart(){
      this.$router.push('/cart')
    },
    toSearch(){
      // path + query    name + params (在路由中声明)
      this.$router.push({path:'/search',query:{keyWords:this.keyWords}})
    }
  }
};
</script>
<style lang='less' scoped>
// 整体Header样式
#head { 
  position: fixed;
  top: 0rem;
  background-color:white;
  padding-bottom: 1rem;
  z-index: 9999;

  // Header上半部分样式
  .head-up {
    width: 36.5rem;
    font-size: 1.7rem;
    display: flex;
    justify-content: space-around;
    padding-top: 2rem;
    align-items: center;
    margin-left: 0.7rem;
    color: black;
    li{
      // 图标
      &:first-child{
          width: 1rem;
          height: 1rem;
          border: 0.4rem solid rgb(52, 52, 52);
          transform: rotateZ(45deg);
      }
      // 竖线
      &:nth-child(2){
        font-weight: lighter;
      }
      // 购物车
      &:nth-child(4){
        
        .iconfont{
          font-size: 2.5rem;
        }
      }
      // 分享
      &:last-child{
        width: 7.5rem;
        background-color: rgba(255, 255, 255, 0.388);
        color: gray;
        border: solid 1px rgba(128, 128, 128, 0.384);
        border-radius: 1.7rem;
        .iconfont{
          font-size: 1.5rem;
        }
        .more{
          margin-left: 0.8rem;
          margin-right: 1.2rem;
        }
        span{
          color: rgba(128, 128, 128, 0.384);
        }
        .dot{
          margin-left: 1.2rem;
        }
      }
    }

  }

  // Header下半部分样式
  .head-down {
    margin-top: 1.2rem;
    width: 37.5rem;
    text-align: center;
    position: relative;
    input{
      width: 35rem;
      font-size: 1rem;
      border: none;
      border-radius: 0.3rem;
      border-right: none;
      padding:0.5rem;
      background-color: rgb(234, 232, 232);
      &:focus{
        outline: none;
      }
    }
    span{
      background-color: rgb(234, 232, 232);
      display: inline-block;
      width: 5rem;
      font-size: 1.3rem;
      position: absolute;
      right: 1rem;
      top: 0.7rem;
    }

  }
}
</style>